<script>
import dataTree from '@/components/ui/data-tree';
export default {
  name: "RoleAuthModal",
  data() {
    return {
      show: false,
      loading: false,
      treeData: [],
      authData: [],
      colsData: [],
      auths: [],
      self: this,
      pid: null,
      roleId: null
    };
  },
  components: {
    dataTree
  },
  computed: {
    dispatch() {
      return this.$store
        ? this.$store.dispatch
        : this.$parent.$data.self.$store.dispatch;
    },
    title() {
      return `当前角色:${this.record.name}`;
    },
    datas() {
      const datas = [];
      for (let item of this.authData) {
        let obj = {};
        obj[item.name] = item.isAuth;
        if (item.children) {
          //假如有孩子，添加
          item.children.map(child => {
            obj[child.name] =
              child.disable + "-" + child.isAuth + "-" + child.value;
          });
        }
        datas.push(obj);
      }
      return datas;
    },
    col() {
      const col = this.colsData;
      const newCol = [];
      this.auths = [];
      for (let c of col) {
        c.render = (h, { row, column, index }) => {
          let v = row[column.dataIndex];

          if (column.dataIndex === "pageName") {
            return v;
          }

          let vs = v.split("-");
          let disabled = vs[0];
          let isAuth = vs[1];
          let value = vs[2];
          if (disabled === "yes") {
            return h("input", {
              attrs: {
                type: "checkbox",
                disabled: "disabled"
              }
            });
          } else {
            if (isAuth === "yes") {
              return h("input", {
                attrs: {
                  type: "checkbox",
                  name: "authBox",
                  value: value,
                  checked: "checked"
                }
              });
            } else {
              return h("input", {
                attrs: {
                  type: "checkbox",
                  name: "authBox",
                  value: value
                }
              });
            }
          }
        };
        newCol.push(c);
      }
      return newCol;
    }
  },
  props: {
    record: {
      type: Object,
      default: function() {
        return {};
      }
    },
    namespace: {
      type: String,
      default: null
    }
  },
  methods: {
    onShowHandle() {
      this.dispatch(`${this.namespace}/DoFetchRoleAuth`, {
        roleId: this.record.id,
        pid: 0
      }).then(response => {
        if (response) {
          const { treeData, authData, colsData } = response;
          this.colsData = colsData;
          this.treeData = treeData;
          this.authData = authData;
          this.show = true;
        }
      });
    },
    ok() {
      const checks = $("input:checkbox[name=authBox]:checked");
      const auths = [];
      checks.each(function(i) {
        auths.push($(this).val());
      });
      const authStr = auths.join("·");
      const params = {
        roleId: this.roleId,
        pid: this.pid,
        auths: authStr
      };
      this.$Modal.confirm({
        title: "操作提示",
        content: "确定授权吗？",
        onOk: () => {
          this.loading = true;
          this.dispatch(`${this.namespace}/DoAuth`, params).then(response => {
            if (response && response.httpCode === 200) {
              this.$Message.success("授权成功");
            } else {
              this.$Message.error(response.msg);
            }
            this.loading = false;
          });
        },
        onCancel: () => {
          if (this.loading) {
            this.loading = false;
          }
        }
      });
    },
    treeClick(row) {
      this.auths = [];
      const roleId = this.record.id;
      const pid = row.id;
      if (roleId && pid) {
        this.pid = pid;
        this.roleId = roleId;
        this.dispatch(`${this.namespace}/fetchAuthList`, { roleId, pid }).then(response => {
          this.authData = response;
        });
      }
    }
  }
};
</script>
<template>
    <span>
        <span @click="onShowHandle">
            <slot></slot>
        </span>
        <Modal
            v-model="show"
            width="1300"
            class="auth-modal"
            :title="title">
            <div class="box">
              <div class="box-left">
                <!-- <Tree :data="treeData" @on-select-change="onSelectChange"  :render="renderContent"></Tree> -->
                <data-tree :tree-data="treeData" :height="450" @tree-click="treeClick" :width="200" :top-header="40">
                  <div slot="header">请选择资源</div>
                </data-tree>
              </div>
              <div class="box-right">
                <Table :content="self" :columns="col" height="450" :data="datas" stripe border></Table>
              </div>
            </div>
            <div slot="footer">
                <Button type="text" @click="show = false">取消</Button>
                <Button type="primary" :loading="loading" @click="ok">{{loading ? '拼命中...' :'确定'}}</Button>
            </div>
        </Modal>
    </span>
</template>

<style lang="less">
.auth-modal .ivu-modal-body {
  padding: 0px !important;
}
.box {
  width:100%;
  height: 450px;
  &-right {
    margin-left:200px;
  }
}
</style>
